<template>
    <div class="table" v-loading.fullscreen.lock="loading">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-menu"></i> 用户管理</el-breadcrumb-item>
                <el-breadcrumb-item>所有用户</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="handle-box">
            <el-button type="success" @click="handleCreate">添加用户</el-button>

            <el-input v-model="select_word" placeholder="手机号/用户/备注" class="handle-input mr10" @keyup.enter.native="search"></el-input>
            <el-button type="primary" icon="search" @click="search">搜索</el-button>
        </div>
        <el-table :data="data"   ref="multipleTable" @sort-change="handleSort">
            <el-table-column prop="name" label="姓名" width="100">
            </el-table-column>
            <el-table-column prop="remark" label="备注" width="150">
            </el-table-column>
            <el-table-column prop="mobile" label="手机号" width="150">
            </el-table-column>
            <el-table-column prop="amounts" label="余额" width="100" :formatter="number_format" sortable>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="small" type="default"
                               @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="small" type="warning"
                               @click="handleCharge(scope.$index, scope.row)">充值</el-button>
                    <el-button size="small" type="primary"
                               @click="handleCost(scope.$index, scope.row)">消费</el-button>
                    <el-button size="small" type="danger"
                               @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                    @current-change ="handleCurrentChange"
                    layout="prev, pager, next"
                    :total="total"
                    >
            </el-pagination>
        </div>
        <div>
            <el-dialog
            title="充值"
            :visible.sync="chargeDialog"
            width="30%"
            center
            >
                <el-form ref="form" :model="chargeData" label-width="80px">
                    <el-form-item label="金额：">
                    <el-input-number v-model="chargeData.amount" :min="0" :step="1" controls-position="right" label="金额"></el-input-number>
                    </el-form-item>
                    <el-form-item label="备注：">
                        <el-input v-model="chargeData.note" type="textarea" autosize placeholder="请输入备注"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="warning" @click="HandleDoCharge">充值</el-button>
                    </el-form-item>
                </el-form>

            </el-dialog>
        </div>
        <div>
            <el-dialog
                    title="消费"
                    :visible.sync="costDialog"
                    width="30%"
                    center
            >
                <el-form ref="form" :model="costData" label-width="80px">
                    <el-form-item label="余额：">
                    <p v-text="costData.money"></p>
                    </el-form-item>
                    <el-form-item label="金额：">
                        <el-input-number v-model="costData.amount" :min="0" :step="1" :max="costData.money" controls-position="right" label="金额"></el-input-number>
                    </el-form-item>
                    <el-form-item label="备注：">
                        <el-input v-model="costData.note" type="textarea" autosize placeholder="请输入备注"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="info" @click="HandleDoCost">消费</el-button>
                    </el-form-item>
                </el-form>

            </el-dialog>
        </div>
        <div>
            <el-dialog
                    title="编辑"
                    :visible.sync="editDialog"
                    width="30%"
                    center
            >
                <el-form ref="form" :model="editData" label-width="80px">
                    <el-form-item label="用户名：">
                        <el-input v-model="editData.name"  placeholder="请输入用户备注"></el-input>
                    </el-form-item>
                    <el-form-item label="备注：">
                        <el-input v-model="editData.remark"  placeholder="请输入用户备注"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号：">
                        <el-input v-model="editData.mobile"  placeholder="请输入手机号"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="default" @click="HandleDoEdit">更新</el-button>
                    </el-form-item>
                </el-form>

            </el-dialog>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                url: this.$baseUrl+'/users',
                tableData: [],
                cur_page: 1,
                multipleSelection: [],
                select_cate: '',
                select_word: '',
                del_list: [],
                is_search: false,
                total:1,
                loading:false,
                chargeDialog:false,
                chargeData:{
                    amount:1,
                    id:'',
                    note:'',
                    act:'charge'
                },
                costDialog:false,
                costData:{
                    amount:1,
                    id:'',
                    note:'',
                    money:0,
                    act:'cost'
                },
                editDialog:false,
                editData:{
                    mobile:1,
                    id:'',
                    remark:'',
                    name:0,
                    act:'update'
                },
            }
        },
        created(){
            this.getData();

        },
        computed: {
            data(){
                const self = this;
                return self.tableData.filter(function(d){
                    return d;
                })
            }
        },
        methods: {
            number_format(row,column){
                return '￥'+row.amounts_format;
            },
            handleCurrentChange(val){
                this.cur_page = val;
                this.getData();
            },
            getData(){
                let self = this;
                self.loading_start();
                self.$axios.get(self.url+'?page='+self.cur_page+'&keywords='+self.select_word).then((res) => {
                    self.loading_end();
                    self.total = res.data.data.total;//总记录数
                    self.tableData = res.data.data.data;//数据
                })
            },
            search(){
                this.getData();
            },
            formatter(row, column) {
                return row.address;
            },
            filterTag(value, row) {
                return row.tag === value;
            },
            handleSort(column, prop, order){
                console.log(column)
            },
            handleEdit(index, row) {
                this.editData.id = row.id;
                this.editData.remark =row.remark;
                this.editData.name=row.name;
                this.editData.mobile=row.mobile;
                this.editDialog = true;
                },
            HandleDoEdit(){
                let self = this;
                self.loading_start();
                self.$axios
                    .patch(self.url,self.editData)
                    .then((res) => {
                        self.loading_end();
                        if(res.data.code===1){
                            self.$message({
                                type:'success',
                                message:res.data.message
                            });
                            self.getData();
                            self.editDialog = false;
                        }else{
                            self.$message.error(res.data.message)
                        }
                    })
            },
            handleCharge(index, row) {
                this.chargeData.id = row.id;
                this.chargeData.amount =1;
                this.chargeData.note='';
                this.chargeDialog = true;
            },
            HandleDoCharge(){
                let self = this;
                self.loading_start();
                self.$axios
                    .patch(self.url,self.chargeData)
                    .then((res) => {
                        self.loading_end();
                        if(res.data.code===1){
                        self.$message({
                            type:'success',
                            message:res.data.message
                        });
                        self.getData();
                        self.chargeDialog = false;
                    }else{
                        self.$message.error(res.data.message)
                    }
                })
            },
            handleCost(index, row) {
                this.costData.id = row.id;
                this.costData.money = row.amounts*1;
                this.costData.amount =1;
                this.costData.note='';
                this.costDialog = true;
                },
            HandleDoCost(){
                let self = this;
                self.loading_start();

                self.$axios
                    .patch(self.url,self.costData)
                    .then((res) => {
                        self.loading_end();

                        if(res.data.code===1){
                            self.$message({
                                type:'success',
                                message:res.data.message
                            });
                            self.getData();
                            self.costDialog = false;
                        }else{
                            self.$message.error(res.data.message)
                        }
                    })
            },
            handleDelete(index, row) {
                let self = this;
                self.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.loading_start();
                    self.$axios
                        .delete(self.url+'/'+row.id)
                        .then((res) => {
                            self.loading_end();
                            if(res.data.code===1){
                                self.$message({
                                    type:'success',
                                    message:res.data.message
                                });
                                self.getData();
                                self.costDialog = false;
                            }else{
                                self.$message.error(res.data.message)
                            }
                        })
                }).catch(() => {

                });
            },
            handleCreate(){
                this.$router.push('/userCreate');
            },
            loading_start(){
                this.loading=true;
            },
            loading_end(){
                this.loading=false;
            }
        }
    }
</script>

<style scoped>
    .handle-box{
        margin-bottom: 20px;
    }
    .handle-select{
        width: 120px;
    }
    .handle-input{
        width: 300px;
        display: inline-block;
    }
</style>